<template>
    <div class="privateAlbumRequests">
        <div class="moduleHead">
            <span class="center">
            <span class="back" @click="$router.go(-1)"></span>
            <span>{{language.privateAlbumRequests_title}}</span>
            </span>
        </div>
        <div class="body">
            <promptTip :props="promptData"></promptTip>
            <ul class="requestList">
                <li v-for="item in items" v-on:click="gotoUserProfile(item.usr_id)" :key="item.usr_id">
                    <div class="avatar">
                        <LazyImg :src="item.icon"></LazyImg>
                    </div>
                    <div class="info">
                        <div class="name">{{ item.username }} </div>
                        <div v-if="!item.hide_profile" class="text">
                            {{ item.baseInfo }}
                        </div>
                        <div class="text" v-else>{{language.unify_hideProfile}}</div>
                        <div class="text">
                            {{language.privateAlbumRequests_requested}} <span class="date">{{item.log_time}}</span>
                        </div>
                    </div>
                    <div class="ope">
                        <span class="acc" @click="operationPrivate($event,item.usr_id,1)">{{language.privateAlbumRequests_accept}}</span>
                        <span class="dec" @click="operationPrivate($event,item.usr_id,0)">{{language.privateAlbumRequests_decline}}</span>
                    </div>
                </li>
            </ul>
            <loading :props="{show:loading}"></loading>
        </div>
        <loading :props="{type:'page', show:approveAjax}"></loading>
    </div>
</template>
<script>
import * as API from '../api';
import LazyImg from './LazyImg'
import promptTip from './PromptTip'
import loading from './Loading'
import globalMixin from '../common/globalMixin'

let scrollFunc,
    userList = [], //局部大对象数组变量
    firstLoad = true,
    condition = {};

export default {

    name: 'privateAlbumRequests',

    components: {
        LazyImg,
        loading,
        promptTip
    },

    mixins: [globalMixin],

    data: function() {
        return {
            loading: 0,
            userListLength: 0,
            promptData: {},
            approveAjax: false,
        }
    },

    created() {
        condition = {
            from: 0,
            offset: 20
        };
        firstLoad = true;
        userList = [];
        this.initData();
    },

    activated: function() {
        this.promptData = {};
    },

    computed: {
        items: function() {
            let data = [],
                tthis = this;
            _.forEach(userList.slice(0, tthis.userListLength), function(value, key) {
                data.push(tthis.formatUserInfo(value));
            });
            return data;
        }
    },

    methods: {

        initData: function() {
            this.getReqList(condition);
        },

        getReqList: function(data) {
            let tthis = this;
            if (this.loading == 0) {
                this.loading = 1;
                API.who_access_private_photo({
                    data: data,
                    success: (response) => {
                        if (response.res.length == 0 && condition.from == 0) {
                            tthis.promptData = {
                                type: 'default',
                                content: tthis.language.whoHasAccess_nodataTip,
                                btn: {
                                    label: tthis.language.whoHasAccess_nodataBtn,
                                    callback: function() {
                                        tthis.$router.push('/uploadPhoto?type=private');
                                    }
                                }
                            };
                            tthis.loading = 0;
                        } else if (response.res.length == 0) {
                            tthis.loading = 3;
                        } else {
                            firstLoad = false;
                            tthis.loading = 0;
                            userList = userList.concat(response.res);
                            tthis.userListLength = userList.length;
                            condition.from = condition.from + condition.offset;
                        }
                    }
                });
            }
        },

        operationPrivate(e, uid, approve) {
            e.stopPropagation();
            e.stopPropagation();
            let tthis = this,
                obj = {};
            obj.data = {
                prof_id: uid,
                approve: approve
            };
            obj.callback = function() {
                tthis.removeListPhoto(uid);
            };
            tthis.approveAjax = true;
            obj.complete = function() {
                tthis.approveAjax = false;
            };
            //obj.callback();
            this.$store.dispatch('user_approvePrivateAlbumRequest', obj);
        },

        removeListPhoto(uid) {
            let tthis = this;
            _.forEach(userList, function(value, key) {
                if (value.usr_id == uid) {
                    userList.splice(key, 1);
                    tthis.userListLength = tthis.userListLength > 0 ? tthis.userListLength - 1 : 0;
                    return false;
                }
            });
        },

        onWinBottomScroll: function() {
            if (this.$route.name == 'privateAlbumRequests') {
                this.getReqList(condition);
            }
        },
        formatUserInfo(userInfo) {
            let data = {};
            data.username = userInfo.username;
            data.usr_id = userInfo.usr_id;
            data.hide_profile = parseInt(userInfo.hide_profile) == 1 ? true : false;
            data.icon = this.getAvatar(userInfo.gender, userInfo.picture.icon);
            data.baseInfo = this.formatUserLocation({
                age: userInfo.age,
                city: userInfo.city,
                state: userInfo.state,
                country: userInfo.country,
            });
            data.gender = userInfo.gender;
            data.log_time = userInfo.log_time;
            return data;
        },

    }
}

</script>
<style scoped>
.privateAlbumRequests {
    background: #fff;
    padding-top: 44px;
}

.privateAlbumRequests .requestList li {
    width: 100%;
    min-height: 100px;
    position: relative;
    overflow: hidden;
    border-bottom: 1px dotted #d9d9d9;
}

.privateAlbumRequests .requestList .ope {
    position: absolute;
    right: 10px;
    top: 0;
}

.privateAlbumRequests .requestList .ope span {
    display: block;
    padding: 0;
    width: 63px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    overflow: hidden;
    font-size: 13px;
    margin-top: 15px;
    border-radius: 2px;
}

.privateAlbumRequests .requestList .ope span.acc {
    background: #e8b14f;
    color: #fff;
}

.privateAlbumRequests .requestList .ope span.dec {
    color: #999;
}

.privateAlbumRequests .requestList .info {
    margin: 0 85px 0 105px;
    overflow: hidden;
}

.privateAlbumRequests .requestList .date {
    color: rgb(102, 102, 102);
}

.privateAlbumRequests .requestList .name {
    margin: 10px 0 0 0;
    padding: 0 40px 0 0;
    position: relative;
    overflow: hidden;
    height: 28px;
    line-height: 28px;
    font-size: 15px;
}

.privateAlbumRequests .requestList .text {
    font-size: 12px;
    line-height: 25px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    color: #a3a4a6;
}

.privateAlbumRequests .ico_gold {
    background: url(../assets/ico_gold.png) center no-repeat;
    background-size: auto 17px;
    padding: 2px 0 2px 17px;
    margin-right: 5px;
}

.privateAlbumRequests .requestList li:last-child {
    order-bottom: 0;
}

.privateAlbumRequests .requestList .avatar {
    position: absolute;
    width: 70px;
    height: 70px;
    border-radius: 35px;
    overflow: hidden;
    left: 15px;
    top: 15px;
    background: url(../assets/default_avatar.png) no-repeat;
    background-size: 70px 70px;
    -webkit-mask-image: -webkit-radial-gradient(circle, white, black);
}


.privateAlbumRequests .nodata {
    position: absolute;
    top: 60px;
    width: 300px;
    margin: auto;
    left: 0;
    right: 0;
    font-size: 15px;
    color: #252525;
    border-radius: 3px;
    text-indent: 20px;
    padding: 10px;
}

.privateAlbumRequests .nodataText {
    border: 1px dashed #ccc;
    margin: auto;
    font-size: 15px;
    color: #252525;
    border-radius: 3px;
    text-indent: 20px;
    padding: 10px;
}

.privateAlbumRequests button {
    margin: 20px 0;
}

</style>
